<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>人力资源管理系统首页</title>
    <!-- Bootstrap 核心 CSS 文件 -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome 核心CSS 文件-->
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 在bootstrap.min.js 之前引入 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!--jquery.validate-->
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/message.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no">
    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <style>
        html,body{
            width:100%;
            height:100%;

            margin:0px;
        }
        #main{
            width:100%;
            height:100%;
            /* background:red;*/
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .top-head{
            width: 100%;
            height: 10%;
            /* background: orange;*/
            display:flex;
            flex-wrap: no-wrap;
            justify-content:center;
        }
        .left-menu{
            width:12%;
            height: 90%;
            /*background:yellow;*/
        }
        .right-content{
            width: 88%;
            height:90%;
            /*   background:blue;*/
        }
        #logo{
            width:10%;
            height:100%;
            line-height:80px;
            /*background:purple;*/
        }
        #title{
            width:100%;
            font-size: 28px;
            text-align:center;
            /*line-height: 80px;*/
            background:#eee;
        }
        /*#per-mes{*/
        /*    width:20%;*/
        /*    height:100%;*/
        /*    line-height: 80px;*/
        /*    !*background:green;*!*/
        /*}*/
        li{
            list-style:none;
        }

        a{
            text-decoration: none;
        }
        a:focus, a:hover {
            color: #23527c;
            text-decoration: none;
        }
        li:hover{
            list-style:none;
        }

    </style>

</head>
<body>
<div id="main">
    <div class="top-head">
<!--        <div id="logo">logo</div>-->
        <div id="title">
            <div id="title1">人力资源管理系统</div>
            <div id="per-mes" style="font-size: 10px;float: right">您好，admin。欢迎您使用后台管理系统！ </div>
        </div>

    </div>
    <div class="left-menu">
        <!-- 侧边栏标签页 -->
        <ul class="nav nav-stacked">
            <!-- 侧边栏选项 -->
            <li role="presentation" class="active">
                <!-- 选项控制data-target对应的显隐 -->
                <a href="#" data-toggle="collapse" data-target="#list">人员管理</a>
                <!-- 隐藏的详细菜单 -->
                <ul id="list" class="collapse in">
                    <li class="active">
                        <a href="/user/list">
                            部门人员
                        </a>
                    </li>
                    <li><a href="">管理人员</a></li>
                </ul>
            </li>
            <li role="presentation"><a href="#" data-toggle="collapse" data-target="#list1">培训管理</a>
                <ul id="list1" class="collapse in">
                    <li class="active">
                        <a href="">
                            培训内容
                        </a>
                    </li>
                    <li><a href="">操作二</a></li>
                </ul>
            </li>
            <li role="presentation"><a href="#" data-toggle="collapse" data-target="#list2">部门管理</a>
                <ul id="list2">
                    <li class="active">
                        <a href="">
                            培训内容
                        </a>
                    </li>
                    <li><a href="">操作二</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="right-content">

        <div style="margin:10px;">
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
            这里是内容
        </div>
    </div>
</div>

<script>

</script>
</body>
</html>